<template>
    <ul>
        <!-- <li>id:{{ this.$route.params.id }}</li>
        <li>标题：{{ this.$route.params.title }}</li>
        <li>内容：{{ this.$route.params.content }}</li> -->

        <!-- <li>路由props对象式用法。{{ val1 }},{{ val2 }}</li> -->
        <!-- <li>路由props布尔值用法。{{ id }},{{ title }},{{ content }}</li> -->
        <li>路由props回调函数式用法。{{ id }},{{ title }},{{ content }}</li>
    </ul>
</template>
<script>
import Vue from 'vue';
export default Vue.extend({
    name: 'Detail',
    // 路由第一种 props
    // props: { 'val1': Number, 'val2': String }, // 也可以写成数组形式 props: ['val1', 'val2']
    // 路由第二种 props，键名字 是路由文件里写的占位符，如 /:id/:title
    // props: ['id', 'title', 'content'],
    // 路由第三种 props
    props: ['id', 'title', 'content'],
    mounted() {
        console.log(this.$route);
    }
})
</script>